<template>
  <div class="app-container newPage">
    <el-steps :active="active" finish-status="success">
      <el-step title="填写基础信息"></el-step>
      <el-step title="填写费项信息"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>

    <component :is="componentType" @ComponentType="ComponentType"></component>

  </div>
</template>
<style lang="scss">
  .app-main {
    background: #E7E7E7;
  }

  .app-container {
    margin: 15px;
    background: #fff;
    border-radius: 5px;
  }

  .newPage {
    .el-steps--horizontal {
      margin-bottom: 35px;
    }

    .el-step:last-of-type.is-flex {
      width: 80px;
    }

    .el-step__icon.is-text {
      background: #C0C4CC;
      border: none;
    }

    .el-step__icon-inner {
      color: white;
    }

    .el-step.is-horizontal .el-step__line {
      left: 140px;
      right: 10px;
    }

    .el-step__head.is-success .el-step__icon.is-text,
    .el-step__head.is-process .el-step__icon.is-text,
    .el-step__head.is-success .el-step__line {
      background: #009FFF;
    }

    .el-step__title.is-process,
    .el-step__title.is-success,
    .el-step__head.is-success{
      border-color: #009FFF;
      color: #009FFF;
    }

    .el-step__main {
      position: absolute;
      top: -6px;
      left: 33px;
      height: 26px;
    }

    .el-form--inline .el-form-item {
      display: flex;
      width: 70%;
      margin: 0 auto 22px;
    }

    .el-form-item__label {
      width: 100px;
    }

    .el-form-item--medium .el-form-item__content {
      flex: 1;
    }

    .el-select {
      width: 100%;
    }

    .selectHouse {
      margin-bottom: 20px;
    }

    .el-button-box {
      text-align: center;
      margin: 20px;
    }
  }
</style>
<script>
  import detailsOne from "../component/detailsOne";
  import detailsTwo from "../component/detailsTwo";
  import detailsThree from "../component/detailsThree";

  export default {
    name: "Contarct",
    // dicts: ['sys_status', 'contarct_status', 'rent_month_type', 'unit_type'],
    components: {
      detailsOne,
      detailsTwo,
      detailsThree
    },
    data() {
      return {
        active: 0,
        componentType: ""
      };
    },
    created() {
      this.ComponentType("detailsOne");
    },
    activated(){
      this.ComponentType("detailsOne");
    },
    methods: {
      ComponentType(val) {
        // console.log(val);
        this.componentType = val;
        this.active = {
          detailsOne: 0,
          detailsTwo: 1,
          detailsThree: 2
        }[val];
      }
    }
  };
</script>
